<template>
  <div class="container">
    <div class="chat">
      <div class="header">有你才有家</div>
      <div class="main">
        <div class="aside">
          <div class="myself">
            <img :src="userinfo.userHeader" class="userimage" alt="" />
            <span class="username">{{ userinfo.userName }}</span>
          </div>
          <h2 class="h2">
            在线成员<span>({{ userOnline.length }})</span>
          </h2>
          <div class="users">
            <div v-for="(item, index) in userOnline" :key="index" class="user">
              <img :src="item.image" class="userimage" alt="" />
              <span class="username">{{ item.username }}</span>
            </div>
          </div>
        </div>
        <div class="message">
          <div class="msglist" ref="msgbox">
            <div class="msg" :class="systemMsg.deep">
              {{ systemMsg.message }}
            </div>
            <div class="list" id="boxs">
              <div
                class="msgBox"
                ref="box"
                :style="{ height: heights + 34 + 'px' }"
              >
                <div
                  v-for="(item, index) in msglist"
                  :key="index"
                  :class="item.user == userinfo.user ? '' : 'mereverse'"
                  class="me"
                >
                  <div class="xinxi">
                    <span>{{ item.message }}</span>
                  </div>
                  <div class="info">
                    <div class="image">
                      <img
                        style="border-radius:50%;"
                        :src="item.userImage"
                        width="38"
                        height="38"
                        alt=""
                      />
                    </div>
                    <div class="name">{{ item.userName }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="core">
            这是功能栏、发图片发表情什么的都在这 但是还没做
          </div>
          <div class="input">
            <textarea
              v-model="msg"
              type="text"
              autofocus
              :draggable="false"
              class="inp"
            />
            <button class="btn" @click="send">发 送</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import chatroomJS from "./chatroom.js";
import { onMounted, onBeforeUnmount, toRefs } from "vue";
export default {
  name: "",
  setup() {
    let {
      status,
      methodFun: { longLink, send },
      msgbox,
      box,
      then,
    } = chatroomJS();
    let { msg, heights, userOnline, userinfo, systemMsg, msglist } = toRefs(
      status
    );
    onMounted(() => {
      // heights.value = window.getComputedStyle(msgbox.value).height;
      longLink();
      // 接收消息列表
      then.$socket.on("serveSend", (data) => {
        msglist.value = data;
      });
      //接收系统消息
      then.$socket.on("systemMsg", (data) => {
        systemMsg.value = data;

        if (data.deep == 0) {
          systemMsg.value.deep = "msg1";
        } else if (data.deep == 1) {
          systemMsg.value.deep = "msg2";
        } else if (data.deep == 2) {
          systemMsg.value.deep = "msg3";
        } else {
          systemMsg.value.deep = "msg4";
        }
      });
    });
    onBeforeUnmount(() => {
      let user = userinfo.value.user;
      then.$socket.emit("quit", user);
    });
    return {
      msgbox,
      box,
      heights,
      userinfo,
      userOnline,
      systemMsg,
      send,
      msg,
      msglist,
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
  .chat {
    position: absolute;
    width: 900px;
    height: 700px;
    border-radius: 8px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid red;
    display: flex;
    flex-direction: column;
    .header {
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: black;
      color: pink;
      font-family: "kaiti";
      text-shadow: 0px 0px 10px white;
      font-weight: 700;
      font-size: 20px;
      letter-spacing: 4px;
    }
    .main {
      flex: 1;
      display: flex;
      .aside {
        height: 100%;
        width: 260px;
        background-color: black;
        display: flex;
        flex-direction: column;
        .myself {
          width: 100%;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
          .userimage {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            margin-right: 20px;
          }
          .username {
            color: yellow;
          }
        }
        .h2 {
          height: 40px;
          width: 100%;
          color: white;
          border-bottom: 1px solid white;
          line-height: 40px;
          font-size: 14px;
          padding-left: 14px;
        }
        .users {
          flex: 1;
          overflow-y: auto;
          .user {
            width: 100%;
            height: 60px;
            padding: 0px 20px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            .userimage {
              width: 44px;
              height: 44px;
              border-radius: 50%;
              margin-right: 50px;
              overflow: hidden;
            }
            .username {
              color: #d9d9d9;
            }
          }
        }
      }
      .message {
        flex: 1;
        height: 100%;
        background-color: whitesmoke;
        display: flex;
        flex-direction: column;
        .msglist {
          flex: 1;
          display: flex;
          flex-direction: column;
          //   background-color: paleturquoise;
          .list {
            // flex: 1;
            width: 100%;
            height: 500px;
            padding: 0px 20px;
            box-sizing: border-box;
            overflow-y: auto;
            &::-webkit-scrollbar {
              width: 4px;
              height: 4px;
            }
            &::-webkit-scrollbar-thumb {
              background-color: #d9d9d9;
              border-radius: 2px;
            }
            .me {
              float: right;
              width: 70%;
              display: flex;
              margin-top: 10px;
              align-items: flex-start;
              justify-content: flex-end;
              .xinxi {
                border: 1px solid red;
                padding: 14px;
                border-radius: 8px;
                margin-right: 20px;
              }
              .info {
                display: flex;
                flex-direction: column;
                .image {
                  width: 38px;
                  height: 38px;
                  border-radius: 50%;
                  border: 1px solid yellow;
                }
                .name {
                  text-align: center;
                  font-weight: 700;
                  font-size: 14px;
                  font-family: "kaiti";
                  line-height: 20px;
                }
              }
            }
            .mereverse {
              flex-direction: row-reverse;
              float: left;
              .xinxi {
                margin-left: 20px;
              }
            }
          }
          .msg {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-family: "kaiti";
          }
          // 严重样式
          .msg1 {
            color: #F56C6C;
            font-weight: 700;
          }
          // 警告样式
          .msg2 {
            color: #E6A23C;
          }
          // 用户退出样式
          .msg3 {
            color: #909399;
          }
          // 用户加入样式
          .msg4 {
            color: #222;
          }
        }

        .core {
          width: 100%;
          height: 40px;
          background-color: #d9d9d9;
        }
        .input {
          width: 100%;
          height: 80px;
          background-color: white;
          display: flex;
          align-items: center;
          .inp {
            flex: 1;
            height: 88%;
            background-color: white;
            border: none;
            outline: none;
            resize: none;
            letter-spacing: -2px;
          }
          .btn {
            width: 60px;
            height: 40px;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>
